<template>
    <div class="stopWrapper" @click="stopClick">
        <img :class="flag?'stopWrapperimg':''"  src="@/assets/stop.png">
        <span class="stoptext">{{text}}</span>
    </div>
</template>

<script setup>
import {ref} from "vue";
let flag = ref(false)
let text = ref('紧停')
function stopClick() {
    console.log(flag.value)
    flag.value= !flag.value
    if(flag.value===true){
        text.value = '解除'
    } else {
        text.value = '紧停'
    }
}


</script>

<style scoped lang="scss">
.stopWrapper{
    position: relative; width: 100px; height: 100px;
    cursor: pointer;
    .stopWrapperimg{
        width: 100%;
        height: 100%;
        animation: rotate360 1s linear infinite;
    }
    @keyframes rotate360 {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .stoptext{
        text-shadow: 2px 2px 5px #656565;
        font-weight: bolder;
        color: #ffffff;
        font-size: 20px;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translateX(50%)translateY(-50%);
    }
}

</style>
